<template>
  <div style='margin-top: 10px;'>
    <div class='va'></div>
    <van-row gutter='10'>
      <van-col span='8' style='min-height: 300px;background-color: #fff;'>
        <van-cell v-for='(item,index) in list' 
        :title='item.cateName' 
        :key='index'
        @click='navclick(item.id,index)' 
        :class='{ active:index==isActive }' />
      </van-col>
      <van-col span='15' style='min-height: 300px;background-color: #fff;margin-left:4px;'>
        <van-grid :column-num='3' class='classify' :border='false'>
          <template v-for='(item,index) in data' v-if='data.length>0'>
            <van-grid-item :to="'/ProductList?sid='+item.id">
              <van-image :src='imgUrls+item.pic' round />
              <span>
								<font size='2' color=''>{{ item.cateName }}</font>
							</span>
            </van-grid-item>
          </template>
        </van-grid>
      </van-col>
    </van-row>
  </div>
</template>

<script>
import {
  getData
} from '@/api/productClassify.js'

export default {
  data() {
    return {
      activeIds: 1,
      style: null,
      list: [],
      isActive: false,
      active: 0,
      data: [],
      imgUrls: this.$baseApi
    }
  },
  created() {
    this.getList()
  },
  methods: {
    getList() {
      getData().then(res => {
        this.list = res.data
        this.navclick(this.list[0].id)
      })
    },
    //获取右侧选中的商品的数据
    getItem(data) {
      this.$router.push({
        name: 'ProductList',
        query: {
          sid: data.id
        }
      })
    },
    navclick(data, index) {
      // console.log(data);
      this.isActive = index
      console.log(index);
      let list = []
      console.log(list);
      this.list.forEach(r => {
        r.children.forEach(res => {
          if (res.pid == data) {
            list.push(res)
          }
        })
      })
      this.data = list
    }

  }
}
</script>

<style scoped>
.va {
  background-color: #ffffff;
  height: 92%;
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;

}

.active /deep/ .van-cell__title span {
  padding-left: 5px;
  border-left: 4px solid #ff6634;

}
</style>
